<template>
  <div v-if="orderList.length > 0">
    <div class="OrderItem" v-for="(item, index) in orderList" :key="index">
      <p class="OrderItem_num">
        订单编号：{{ item.orderNumber }}
        <span>{{ orderType[item.status] }}</span>
      </p>
      <div v-if="item.typ == 1">
        <van-row class="Order_item">
          <van-col span="7">
            <img src="@/assets/MyCard.png" />
          </van-col>
          <van-col span="17">
            <div class="Order_right">
              <h3>会员卡 * 100</h3>
              <p>￥ {{ (item.amount / 10000).toFixed(2) }}X {{ item.num }}</p>
            </div>
          </van-col>
        </van-row>
      </div>
      <div v-else>
        <van-row
          class="Order_item"
          v-for="(item1, index1) in item.proList"
          :key="index1"
        >
          <van-col span="7">
            <img :src="$base.baseImg + item1.img[0]" />
          </van-col>
          <van-col span="17">
            <div class="Order_right">
              <h3>{{ item1.proName }}</h3>
              <p>￥ {{ (item1.price / 100).toFixed(2) }}X {{ item1.num }}</p>
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="Order_bottom">
        <p class="OrderItem_num" v-if="item.status == 2 && item.typ == 1">
          运单号：{{ item.waybillNumber }}
        </p>
        <van-button
          v-if="item.status == 0"
          type="primary"
          color="#D4B066"
          round
          size="mini"
          @click="getOrderPay(item.orderNumber)"
          >去支付</van-button
        >
        <van-button
          v-if="item.status == 2 && item.typ == 1"
          type="primary"
          color="#D4B066"
          round
          size="mini"
          @click="confirmReceipt(item.orderNumber)"
          >确认收货</van-button
        >
      </div>
    </div>
  </div>
  <van-empty v-else />
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from "vue-property-decorator";
import { Col, Row, Button, Empty, Dialog, Toast } from "vant";
Vue.use(Empty);
Vue.use(Button);
Vue.use(Col);
Vue.use(Row);
Vue.use(Dialog);
@Component({})
export default class OrderItem extends Vue {
  @Prop() orderList?: [];

  private orderType = {
    0: "待支付",
    1: "待发货",
    2: "待收货",
    3: "已完成",
  };
  private confirmReceipt(e: string) {
    Dialog.alert({
      message: "您确定收货吗？",
    }).then(() => {
      this.$post(`confirmReceipt`, {
        orderNumber: e,
      }).then((res: any) => {
        Toast.success(`收货成功！`);
      });
    });
  }
  @Emit()
  getData() {}
  private getOrderPay(e: string) {
    let that = this;
    this.$post(`getOrderPay`, {
      orderNumber: e,
    }).then((res: any) => {
      this.$wx.ready(() => {
        this.$wx.chooseWXPay({
          timestamp: res.data.timestamp,
          nonceStr: res.data.noncestr,
          package: res.data.package,
          signType: res.data.signType,
          paySign: res.data.sign,
          success: function (res: any) {
            if (res.errMsg == "chooseWXPay:ok") {
              that.getData();
            } else if (res.errMsg == "chooseWXPay:cancel") {
              Toast.success("取消支付成功！");
            } else if (res.errMsg == "chooseWXPay:fail") {
              Toast.fail("支付失败！");
            }
          },
        });
      });
    });
  }
}
</script>

<style lang="scss" scope>
.OrderItem {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fff;
  overflow: hidden;
  .OrderItem_num {
    font-size: 24px;
    font-weight: 300;
    color: #000000;
    line-height: 2;
    text-align: left;
    display: inline-block;
    width: 100%;
    span {
      color: rgb(212, 176, 102);
      float: right;
    }
  }
  .Order_item {
    border-bottom: 1px solid #dbdbdb;
    padding: 10px 0;
    padding: 20px;
    background-color: #fff;
    box-sizing: border-box;
    width: 100%;
    img {
      width: 100%;
      display: block;
      max-height: 150px;
      border-radius: 20px;
    }
    .Order_right {
      padding-left: 10px;
      box-sizing: border-box;
      h3 {
        font-size: 30px;
        font-weight: 400;
        color: #000000;
        line-height: 1.5;
      }
      p {
        font-size: 24px;
        font-weight: 300;
        color: #333333;
        line-height: 1.5;
        overflow: hidden;
      }
    }
  }
  .Order_bottom {
    padding: 10px;
    box-sizing: border-box;
    text-align: left;
    button {
      float: right;
    }
  }
}
</style>